<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比赛列表</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!--标准mui.css-->
<link href="/match/css/login/mui.min.css" rel="stylesheet" />
<link href="/match/css/matchList/app.css" rel="stylesheet" />
<script src="/match/libs/mui/mui.min.js"></script>
<script src="/match/libs/jquery/3.2.1/jquery-3.2.1.js"></script>
<link href="/match/css/index/iconfont.css" rel="stylesheet"/>
<!--App自定义的css-->

<style>
.title {
	margin: 20px 15px 10px;
	color: #6d6d72;
	font-size: 15px;
}
</style>
</head>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">比赛列表</h1>
	<a class="mui-icon icon--chuangjianbisai mui-pull-right" href="/match/match/matchCreatePage"></a>
</header>

<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
			
<ul class="mui-table-view">
	
	<c:forEach items="${matchInfoList}" var="matchInfo" varStatus="s">
	<li class="mui-table-view-cell mui-media"><a href="/match/match/matchDetailPage?matchId=${matchInfo.matchId}">
			<img class="mui-media-object mui-pull-left"
			src="/match/images/match/world.png">
			<div class="mui-media-body">
				${matchInfo.matchName}
				<p class='mui-ellipsis'>
				<fmt:parseDate value="${matchInfo.matchStartTime}" pattern="yyyyMMddHHmmss" var="matchStartTime"/>   
				<fmt:formatDate value="${matchStartTime}" pattern="yyyy-MM-dd HH:mm:ss"/>  
					
				</p>
			</div>
	</a></li>
</c:forEach>
</ul></div>
		</div>
<script type="text/javascript">
	mui.init({
		pullRefresh : {
			container : '#pullrefresh',
			down : {
				callback : pulldownRefresh
			},
			up : {
				contentrefresh : '正在加载...',
				callback : pullupRefresh
			}
		}
	});
	/**
	 * 下拉刷新具体业务实现
	 */
	function pulldownRefresh() {		
			
				$.ajax({ //一个Ajax过程

					type : "post", //以post方式与后台沟通

					url : "/match/match/matchList", //与此php页面沟通

					dataType : 'json',//返回的值以 JSON方式 解释

					data : "limit=10&start=0", //发给php的数据有两项，分别是上面传来的u和p

					success : function(json) {//如果调用php成功		

						var dataObj=eval(json);//转换为json对象

						var type = dataObj.type;
						var status = dataObj.status;
						var data = dataObj.info;
						if(status == "success"){
							
								var table = document.body.querySelector('.mui-table-view');
								var cells = document.body.querySelectorAll('.mui-table-view-cell');
								table.innerHTML="";
								var content = "";
								for (var i = 0; i < data.length; i++) {
									
									var li = document.createElement('li');
									//li.className = 'mui-table-view-cell mui-media';
									licontent = '<li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" '+
									'src="/match/images/match/taiguo.png"><div class="mui-media-body"> '
										+ data[i].matchName
											+ '<p class="mui-ellipsis">2017-07-25 09:00:00</p></div></a><li>';
									//下拉刷新，新纪录插到最前面；
									content+=licontent;
									
								}
								table.innerHTML = content;
								mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
							
						}else{					
								$("#errorTip").html(dataObj.message);
							
						}
						
					}
				});
			
		
		
		
	}
	var count = 1*10+0;
	/**
	 * 上拉加载具体业务实现
	 */
	function pullupRefresh() {
		$.ajax({ //一个Ajax过程

			type : "post", //以post方式与后台沟通

			url : "/match/match/matchList", //与此php页面沟通

			dataType : 'json',//返回的值以 JSON方式 解释

			data : "limit=10&start="+count, //发给php的数据有两项，分别是上面传来的u和p

			success : function(json) {//如果调用php成功		

				var dataObj=eval(json);//转换为json对象

				var type = dataObj.type;
				var status = dataObj.status;
				var data = dataObj.info;
				if(status == "success"){
				
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(
							(data.length == 0)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body
							.querySelectorAll('.mui-table-view-cell');
					for (var i = 0; i < data.length; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media';
						li.innerHTML = '<a href="javascript:;"><img class="mui-media-object mui-pull-left" '+
						'src="/match/images/match/taiguo.png"><div class="mui-media-body"> '
								+ data[i].matchName + '<p class="mui-ellipsis">2017-07-25 09:00:00</p></div></a>';
						table.appendChild(li);
					}
					count+=10;
				}else{					
						$("#errorTip").html(dataObj.message);
					
				}
				
			}
		});
		
					
				
	}
	// 监听tap事件，解决 a标签 不能跳转页面问题
	mui('body').on('tap','a',function(){document.location.href=this.href;});
</script>
</body>
</html>